<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '行程',
  },
}
</route>

<template>
  <view v-if="loading">
    <Loading></Loading>
  </view>
  <view v-else class="bg-white">
    <map
      style="width: 100%; height: 450px"
      :latitude="data?.centerLatitude"
      :longitude="data?.centerLongitude"
      :polyline="formatJSON(data?.scenicPoints)"
      :markers="formatMap(data.scenicPoints)"
    ></map>
    <view>
      <view class="p-4">
        <view class="flex justify-between mb-2">
          <wd-text :text="data?.name"></wd-text>
          <wd-text :text="data?.location"></wd-text>
        </view>

        <view>
          <wd-tag
            color="#0083ff"
            bg-color="#d0e8ff"
            v-for="(str, index) in formatTag(data?.tag)"
            :key="index"
            custom-class="space"
            type="warning"
          >
            {{ str }}
          </wd-tag>
        </view>
        <view class="flex justify-between mb-2">
          <wd-text :text="`里程：${data?.distance} KM`"></wd-text>
          <wd-text :text="`耗时：${(data?.estimatedTime / 60).toFixed(1)} 小时`"></wd-text>
        </view>
        <view class="mb-3">
          <wd-notice-bar :text="data?.recommend" prefix="warn-bold" />
        </view>
        <view class="mb-3">
          <view class="mb-2">推荐路线</view>
          <wd-text :text="data?.recommend"></wd-text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Loading from '@/components/loading/loading.vue'
import { getOneRouteAPI, RouteVO } from '@/service/route/route'
import { formatJSON, formatMap, formatTag } from '@/utils/string'

const loading = ref(true)
const data = ref<RouteVO>({})
onLoad(async (options) => {
  try {
    const res = await getOneRouteAPI(options.id)
    data.value = res.result
    loading.value = false
  } catch (error) {
    console.error('Error fetching route data:', error)
    // 错误处理
  }
})
</script>

<style lang="scss" scoped>
:deep(.space) {
  margin-right: 5px;
}
</style>
